<template>
    <Browser class="browser" :basicInfo="basicInfo"></Browser>
    <StatisticsSearch class="search_box" :options="statisOptions" @submit="onSubmit" />

    <Follow ref="FollowRef" :params="params" @refresh="refresh" />
    <!-- <LineChart :searchInfo="searchInfo" ref="lineChart"></LineChart> -->
</template>


<script setup lang="ts">
import Browser from './components/Browse.vue'
import Follow from './components/Follow.vue'
// import LineChart from './components/LineChart.vue'
import { cusStatBasicInfo } from '@/api/customerCenter'
import { getBoardlist } from '@/api/customerbulletin/bulleinManage'
import { ref, inject, onMounted, reactive, watch, nextTick } from 'vue'
import { getDay } from '@/utils/utils'
import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue'

// const lineChart = ref()
const basicInfo = ref()
const FollowRef:any = ref(null)
// const searchInfo = ref()
const update = ref()
const params = reactive({
  screen_time: [],
  employee_ids: '',
  departments: []
})

const statisOptions = reactive([
  {
    label: '时间筛选',
    type: 'dateFilter',
  },
  {
    label: '选择成员和部门',
    type: 'depart',
    // key: 'departkey',
    userKey: 'depart',
    popperClass: 'zw-hide_select_option',
    departmentKey: "departments",
    placeholder: '全部',
    multiple: true,
    isMember: false
  }
])

const onSubmit = (data:any) => {
  nextTick(() => {
    if(data.times) {
      searchData(data)
    }
  })
}

onMounted(() => {})
// 客户统计基本信息
const getBasicInfo = () => {
  getBoardlist(params).then((data: any) => {
    basicInfo.value = data.info
  })
}
getBasicInfo()
const searchData = (data: any) => {
  params.screen_time = data.times || []
  params.employee_ids = data.depart || []
  params.departments = data.departments || []
  getBasicInfo()
  const paramsindex = { props: { name: FollowRef.value.activeName } }
  FollowRef.value.onChangeTab(paramsindex.props.name)//调用子组件方法
}
</script>

<style lang="scss" scoped>
.layout {
  .search {
    margin: 16px 0;
  }
  .pie {
    margin-bottom: 16px;
  }
  .list {
    margin-top: 15px;
  }
  .updated {
    width: 266px;
    line-height: 20px;
    color: #ff6b00;
    font-size: 14px;
    margin-top: 13px;
    border-radius: 10px;
    border: 1px solid #ff6b00;
  }
  .search_box {
    margin-bottom: 15px;
  }
}
</style>
